<template>
  <div>
    <a-card :bordered="false">
      <!-- 条件搜索 -->
      <!-- <div>
        <a-form>
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="菜单标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="queryParam.title" placeholder="请输入" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-button type="primary" @click="searchQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="searchReset"><a-icon type="redo" />重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div> -->
      <!-- 数据展示 -->
      <vxe-grid
        id="MenuList"
        ref="vxeTable"
        :height="null"
        v-bind="gridOptions"
        :pagerConfig="false"
        :treeConfig="{rowField: 'name',children: 'children',reserve:true}"
        :expand-config="{accordion: false}"
        :row-config="{isCurrent:true,keyField:'id'}"
        @current-change="onCurrentChange"
      >
      <template #dictText={row,column}>
        <span>{{getDictText(row[column.field])}}</span>
      </template>
      <template #action="{ row }">
        <a @click="handleEdit(row)" >编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down"/>
          </a>
          <a-menu slot="overlay">
            <a-menu-item >
              <a @click="handleAddItem(row)">添加子菜单</a>
            </a-menu-item>
            <a-menu-item v-if="row.urlType !== 'M'">
              <a @click="handleEditData(row)">权限资源</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </vxe-grid>
    <!-- 增加修改 -->
    <MenuModal
      ref="modalForm"
      :menuOptions="dataSource"
      :statusOptions="statusOptions"
      :visibleOptions="visibleOptions"
      @ok="modalFormOk"
    />
    </a-card>
    <AuthorityResListModal ref="AuthorityResListModal" />
  </div>
</template>

<script>
import MenuModal from './modules/MenuModal'
import AuthorityResListModal from './modules/AuthorityResListModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { deleteAction, getAction } from '@/services/manage'
export default {
  name: 'MenuList',
  components: {
    MenuModal,
    AuthorityResListModal
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      allIcon: {},
      iconVisible: false,
      list: [],
      // 部门树选项
      menuOptions: [],
      loading: false,
      // 状态数据字典
      statusOptions: [],
      visibleOptions: [],
      queryParam: {},
      columns: [
        { type: 'seq', width: 60, field: 'seq' },
        { title: '菜单标题', field: 'title', showOverflow: true, width: 180, treeNode: true },
        { title: '组件路径', field: 'component', showOverflow: true },
        { title: '路由路径', field: 'path' },
        { title: '图标', field: 'icon', scopedSlots: { customRender: 'icon' }},
        { title: '排序', field: 'order' },
        { title: '创建时间', field: 'createTime', showOverflow: true },
        { title: '操作', field: 'operation', width: 150, slots: { default: 'action' }}
      ],
      url: {
        list: '/res/url/list',
        delete: '/res/url/remove'
      },
      currentData: {},
      dataSource: []
    }
  },
  methods: {
    async loadTableData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      const res = await getAction(this.url.list, params)
      this.loading = false
      if (res.success) {
        this.dataSource = res.result
      }
      return res
    },
    setCurrentData() {
      const row = this.$refs.vxeTable.getRowById(this.currentData.id)
      this.$refs.vxeTable.setCurrentRow(row)
    },
    onCurrentChange({ row }) {
      this.currentData = row
    },
    handleAddItem(row) {
      this.$refs.modalForm.title = '添加子菜单'
      this.$refs.modalForm.add(row)
    },
    handleEditData(row) {
      this.$refs.AuthorityResListModal.show(row)
    },
    handleDelete: function(id) {
      if (!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      deleteAction(`${this.url.delete}`, { id: id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}

</script>
